<template>
  <l-layout :right="300">
    <l-panel>
      <el-tree
        ref="tree"
        :data="data"
        class="learun-tree"
        :props="defaultProps"
        node-key="rid"
        highlight-current
        
        :check-strictly="true"
        :load="loadNode"
        lazy
        show-checkbox
        
        :expand-on-click-node="false"
        @check-change="handleCheckChange"
        @node-click="handleClick"
      >
        <span class="lr-tree-node" slot-scope="{ data }">
          {{ $t(data.rname) }}
        </span>
      </el-tree>
    </l-panel>
    <template #right>
      <l-table
        :columns="columns"
        :dataSource="tableData"
        :isPage="false"

        v-if="showUserlist"
      >
      </l-table>
    </template>
  </l-layout>
</template>

<script>
const api = window.$api.organization.user;

export default {
  data() {
    return {
      data: [],
      treeChildMap: {},
      treeMap: {},
      defaultProps: {
        children: "children",
        label: "f_Name",
        isLeaf: "leaf",
      },
      isFirst: true,

      columns: [{ label: "名称", prop: "uname" }],
      tableData: [],
      showUserlist:false,

      values: [],
    };
  },
  computed: {},
  methods: {
    async loadData(parent, parentId) {
      if (!this.treeChildMap[parent.rid]) {
        let data = [];
        if (this.isFirst) {
          data = (await this.$awaitWraper(api.getRootRids())) || [];
          this.isFirst = false;
        } else {
          data = (await this.$awaitWraper(api.getNextRids(parentId))) || [];
        }

        data.forEach((item) => {
          item.leaf = item.chlidNum == 0;
          item.hasChildren = item.chlidNum > 0;
          item.id = this.$uuid();
        });
        this.treeChildMap[parentId] = data;
      }

      return this.treeChildMap[parentId];
    },
    async loadNode(node, resolve) {
      let parentId = "0";
      if (node.level != 0) {
        parentId = node.data.rid;
      }

      const res = await this.loadData(node.data, parentId);
      if (node.data) {
        node.data.children = res;
      }

      setTimeout(()=>{
        this.$refs.tree.setCheckedKeys(this.values);
      },100)

      resolve(res);
    },
    handleCheckChange(data, checked) {
      const addList = [];
      if (checked) {
        this.values.push(data.rid);
        console.log(data);
        addList.push({
          f_UserId: data.rid,
          f_Type: 9,
          f_Name: data.rname,
          f_Category: 1,
        });

      } else {
        this.values = this.values.filter((v) => {
          return v !== data.rid;
        });
      }

      this.$emit("change", { values: this.values, addList, type: 9 });
    },

    handleClick(node) {
      api.getusersbyroleid(node.rid).then((res) => {
        this.tableData = res.data.data;
        this.showUserlist = true;
      });
    },


    setForm(value) {
      this.values = value;
      this.$refs.tree.setCheckedKeys(this.values);
    },
    
    resetForm() {
      this.clear();
    },
    clear(){
      this.values = [];
      this.$refs.tree.setCheckedKeys([]);
    },
    delete(id){
      this.values = this.values.filter(t=>id != t);
      this.$refs.tree.setCheckedKeys(this.values);
      this.$emit("change", { values: this.values, addList:[], type: 9 });
    },
  },
};
</script>
